<template>
  <view class="hb-relative hb-flex hb-items-center hb-flex-col hb-w-full hb-p-4">
    <view class="hb-w-full hb-h-63 hb-absolute hb-top-0 hb-left-0">
      <image
        style="width: 100%; height: 100%"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/ai-home-backimg.png"
        mode="widthFix"
      />
    </view>
    <TImage class="hb-mt-20" :src="logo" width="160rpx" height="160rpx" />
    <TmText class="hb-mt-16" _class="hb-font-bold" label="超级助手 “智”在必得" :font-size="36" />
    <view class="hb-mt-9 hb-mb-9 hb-flex hb-items-center hb-justify-center hb-gap-2">
      <CustomButton text="AI找合作" />
      <CustomButton text="AI找资源" />
      <CustomButton text="AI找资讯" />
    </view>
    <view id="home-guide-step-4" class="hb-w-full">
      <TmButton
        v-if="!userInfo?.aiUserAccountBotVo"
        :block="true"
        color="primary"
        font-color="#fff"
        :height="88"
        :font-size="32"
        :round="16"
        label="获取专属AI助手"
        @click="handleGetAiAssistant"
      />
      <ChatInput
        v-else
        placeholder="基于共享资源+您的知识库回复"
        disabled
        :chat-source="ChatSource.PRIVATE"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { useAppStore } from '@/store/modules/app';
  import CustomButton from './CustomButton.vue';
  import { useUserStore } from '@/store/modules/user';
  import { ChatSource } from '@/enums/MessageEnum';
  import { GuideType, useGuideStore } from '@/store/modules/guide';

  const { logo } = useAppStore();

  const useUser = useUserStore();
  const { userInfo } = storeToRefs(useUser);

  const handleGetAiAssistant = () => {
    navigateTo({ name: 'createAi' });
  };

  const ins = getCurrentInstance();
  useGuideStore().addGuide(3, {
    title: '与智能助手对话',
    description: '与您的智能助手对话，帮您找合作、找资源、查资讯等',
    nodeInfo: {
      selector: '#home-guide-step-4',
      ins,
      },
    },
    GuideType.HOME,
  );
</script>

<style scoped></style>
